<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手写签名板</title>
    <style>
        canvas {
            border: 1px solid black;
        }
        #buttons {
            margin-top: 10px;
        }
    </style>
</head>
<body>
    <h1>手写签名板</h1>
    <canvas id="signatureCanvas" width="500" height="300"></canvas>
    <div id="buttons">
        <button id="startButton">开始签名</button>
        <button id="finishButton">完成签名</button>
    </div>

    <script>
        const canvas = document.getElementById('signatureCanvas');
        const ctx = canvas.getContext('2d');
        const startButton = document.getElementById('startButton');
        const finishButton = document.getElementById('finishButton');
        const url = "ws://127.0.0.1:29993";
        let isDrawing = false;
        let websocket;

        canvas.addEventListener('mousedown', (e) => {
            isDrawing = true;
            ctx.beginPath();
            ctx.moveTo(e.offsetX, e.offsetY);
        });

        canvas.addEventListener('mousemove', (e) => {
            if (isDrawing) {
                ctx.lineTo(e.offsetX, e.offsetY);
                ctx.stroke();
            }
        });

        canvas.addEventListener('mouseup', () => {
            isDrawing = false;
            ctx.closePath();
        });

        canvas.addEventListener('mouseout', () => {
            isDrawing = false;
            ctx.closePath();
        });

        startButton.addEventListener('click', () => {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
        });

        finishButton.addEventListener('click', () => {
            const dataURL = canvas.toDataURL('image/png');
            console.log("签名完成，发送数据到服务器:", dataURL);
            if (websocket.readyState === WebSocket.OPEN) {
                websocket.send(dataURL);
            }
        });

        // Connect to WebSocket server
        websocket = new WebSocket(url);

        websocket.onopen = function(event) {
            console.log("连接到服务器");
        };

        websocket.onmessage = function(event) {
            console.log("从服务器接收到消息:", event.data);
            // 可以根据需要处理从服务器接收到的消息
        };

        websocket.onclose = function(event) {
            console.log("连接关闭");
        };

        websocket.onerror = function(error) {
            console.error("WebSocket发生错误:", error);
        };
    </script>
</body>
</html>
